<template>
    <div class="common-card" :class="[themeType]">
        <public-title title="服务详情数据" :themeType="themeType" />
        <div class="inner">
            <div class="type-time">
                <span
                    v-for="(item, index) in typeTime"
                    :key="index"
                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
                    @click="handleSelect(index, item.value)"
                    >{{ item.name }}</span
                >
            </div>
            <div class="server-container">
                <div
                    v-for="(item, index) in statistics"
                    :key="index"
                    class="server-item"
                    :class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '', themeType]"
                    @click="handleClick(item)"
                >
                    <span>{{ item?.name }}</span>
                    <span>{{ item?.value }}</span>
                </div>
                <a-spin :spinning="spinning" class="spin"></a-spin>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, ref, watch } from 'vue';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { list } from '/@/components/body-d-left/left.api';
    import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
    import { useDetailStore } from '/@/store/modules/detailData.ts';
    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
    import { left1 } from '/@/views/yinChuanTest/mockData.ts';

    const { themeType } = useTheme();
    const { LEFT_KEY1 } = caching;
    const props = defineProps({
        refreshState: {
            type: Boolean,
        },
        setting: {
            type: Object,
        },
        theme: {
            type: String,
        },
    });
    const emit = defineEmits(['handleClick']);
    const typeTime = ref(timeTab);
    const { statistics, setStatistics, getStatistics } = useStatistics();
    const selectIndex = ref(0);
    const selectVal = ref('2'); //本年
    const { setSpin, spinning } = useSpin();

    onMounted(() => {
        getList();
    });

    const useDetail = useDetailStore();
    const { setSession, getSession } = useSession();

    async function getList() {
        setSpin(true);
        try {
            const { code, result } = left1;
            setSpin(false);
            if (code != 200 || !result) {
                return;
            }
            setSession(LEFT_KEY1, JSON.stringify(result));
            setValue(result);
        } catch {
            setSpin(false);
            const result = JSON.parse(getSession(LEFT_KEY1));
            setValue(result);
        }
    }

    function setValue(result = {}) {
        let { alerdyreceive = '', totalacceptance = '' } = result;
        setStatistics(result);
        if (alerdyreceive || totalacceptance) {
            useDetail.setAlerdyreceive(alerdyreceive);
            useDetail.setTotalacceptance(totalacceptance);
        }
    }

    function handleSelect(index: number, value: string) {
        selectIndex.value = index;
        selectVal.value = value;
        getList();
    }

    function handleClick(item) {
        emit('handleClick', item);
    }

    watch(
        () => props.refreshState,
        () => {
            getList();
        }
    );
</script>
<style scoped lang="less">
    .inner {
        height: calc(100% - 40px);

        .server-container {
            color: #fff;
            padding-top: 10px;
            height: 88%;
            display: grid;
            align-items: start;
            overflow-y: auto;
            position: relative;

            .spin {
                position: absolute;
                left: 50%;
                top: 50%;
            }
        }

        .server-item {
            font-size: 16px;
            padding: 6px 6% 6px 5%;

            &.hasCursor {
                cursor: pointer;
            }

            display: flex;
            justify-content: space-between;
        }
    }
</style>
